<template>
  <div>
    <div class="course-core" v-if="isTeacher">
      <div class="nav">
        <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
        >
          <el-tab-pane label="我的课程" name="first">
            <div class="content">
              <el-row :gutter="20">
                <el-col
                  :span="6"
                  v-for="course in teacherCourseList" :key="course.id"
                >
                  <course
                    :course="course"
                    style="cursor: pointer"
                  />
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-empty v-else :description="msg" />
  </div>
</template>

<script lang='ts' setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import Request from '@/api/request/request';
import Course from '@/views/page/tearchertack/mycourse/home/Course.vue';

// 类似于vue2的this,获取当前组件的实例
const { proxy } = getCurrentInstance();
// 教师所属课程所有集合
const teacherCourseList = ref();
// 判断该账户是否为教师账户
const isTeacher = ref(false);
// 返回的错误信息
const msg = ref<string>();
const activeName = ref('first');

// 获取教师所有课程
const getTeacherCourseList = async () => {
  let result: any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLCOURSE_COURSE_MANAGE).get();
  if (result.code === 200) {
    isTeacher.value = true;
    teacherCourseList.value = result.data;
  } else {
    teacherCourseList.value = [];
    msg.value = result.message;
  }
};
onMounted(async () => {
  await getTeacherCourseList();
});

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.course-core {
  width: 100%;
  height: 100%;

  .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100% 200%;
    background:  rgba(20, 20, 20, .7);
    opacity: 1;
    transition: 0.5s;
  }

  .nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title {
      height: 35px;
      ul {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 8%;
        background-color: #f3f3f3;
        list-style: none;
        border-radius: 4px;
        li {
          font-size: 20px;
        }
      }
    }
  }
}
</style>
